<template>

  <div>
    <el-menu defaultActive="1" mode="vertical">
      <el-submenu v-for="menu in menus" :index="menu.id+''">
        <template slot="title">
          <i :class="['iconfont',menu.icon]"></i>
          <span>{{menu.name}}</span>
        </template>
        <el-menu-item v-for="item in menu.children" :index="item.id+''">
          <i :class="['iconfont',menu.icon]"></i>
          <span @click="topage(item.url)">{{item.name}}</span>
          <!--<router-link :to="item.url"> {{item.name}} </router-link>-->
        </el-menu-item>
      </el-submenu>
    </el-menu>

  </div>

</template>

<script>
  import ElSubmenu from "../../node_modules/element-ui/packages/menu/src/submenu.vue";
  import  axios from "axios"
  export default {
    components: {ElSubmenu},
    name: "Menu",
    data() {
      return {
        menus:[]
      }
    },
    methods:{
      topage(url){
        this.$router.push(url);
      }
    },
    created(){

      var that = this;
      //到后台请求数据
      axios.get("/static/menu.json",{

      }).then(function (data) {
        that.menus = data.data;
      }).catch(function (ex) {

      });
//      this.menus = [{
//        id:1,
//        icon: "icon-tuichu",
//        name:"权限管理",
//        children:[
//          {
//            id:11,
//            icon: "icon-tuichu",
//            name:"用户管理"
//          },
//          {
//            id:11,
//            icon: "icon-tuichu",
//            name:"角色管理"
//          }
//        ]
//      },
//        {
//          id:2,
//          icon: "icon-tuichu",
//          name:"系统管理",
//          children:[
//            {
//              id:21,
//              icon: "icon-tuichu",
//              name:"日志管理"
//            },
//            {
//              id:22,
//              icon: "icon-tuichu",
//              name:"安全退出"
//            }
//          ]
//        }]

    }
  }

</script>
<style>

</style>
